<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tip {
            position: absolute;
            height: 300px;
            width: 300px;
            background-color: #cdcdcd;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .tip .tip_header {
            width: 300px;
            height: 30px;
            background-color: #594d64;
            color: #FFFFFF;
            font-size: large;
        }

        .tip .tip_content {
            width: 300px;
            height: 260px;
            background-color: #666666;
            color: #FFFFFF;
            font-size: large;
            text-align: center;
            line-height: 260px;
        }

        .tip .tip_footer {
            width: 300px;
            height: 30px;
            background-color: #594d64;
            color: #FFFFFF;
            font-size: large;
        }

        .tip .tip_footer .tip_confirm {
            display: inline-block;
            height: 30px;
            width: 60px;
            background-color: #FF0000;
            text-align: center;
            float: right;
            margin-right: 10px;
        }

        .tip .tip_footer .tip_cancel {
            display: inline-block;
            height: 30px;
            width: 60px;
            background-color: #00FF00;
            text-align: center;
            float: right;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<button id="btn">删除</button>
<button id="btn2">新增</button>
</body>
<script>
    var btn = document.querySelector("#btn");
    var btn2 = document.querySelector("#btn2");
    var tip = {
        header: "提示",
        content: "前方一百米有条大狼狗",
        okBtn: {
            content: "确定", fn: function () {
                alert("确定点击");
            }
        },
        cancelBtn: {
            content: "no", fn: function () {
                alert("取消");
            }
        },
        init: function (option) {
            this.extend(option);
            this.create();
        },
        extend: function (option) {
            for (var i in option) {
                this[i] = option[i];
            }
        },
        create: function () {
            var that = this;
            //做什么  判断tip 是否存在
            var hasTip = document.querySelector(".tip");
            if (hasTip) {
                this.show();
                this.tipheader.innerHTML = this.header;
                this.tipcontent.innerHTML = this.content;
                this.tip_cancel.innerHTML = this.cancelBtn["content"];
                this.tip_confirm.innerHTML = this.okBtn["content"];
//                this.tip_confirm.onclick = this.okBtn["fn"];
//                this.tip_cancel.onclick = this.cancelBtn["fn"];
            } else {
                var tip = document.createElement("div");
                tip.className = "tip";
                document.body.appendChild(tip);
                this.tip = tip;//构建一个公共的属性

                var tipheader = document.createElement("div");
                tipheader.className = "tip_header";
                tipheader.innerHTML = this.header;
                tip.appendChild(tipheader);
                this.tipheader = tipheader;

                var tip_content = document.createElement("div");
                tip_content.className = "tip_content";
                tip_content.innerHTML = this.content;
                tip.appendChild(tip_content);
                this.tipcontent = tip_content;


                var tip_footer = document.createElement("div");
                tip_footer.className = "tip_footer";
                tip.appendChild(tip_footer);

                var tip_cancel = document.createElement("span");
                tip_cancel.className = "tip_cancel";
                tip_cancel.innerHTML = this.cancelBtn["content"];
//                tip_cancel.addEventListener("click", this.cancelBtn["fn"]);
                tip_cancel.onclick = function () {
                    that.cancelBtn["fn"]();
                };
                tip_footer.appendChild(tip_cancel);
                tip_cancel.addEventListener("click", function () {
                    that.hide();
                });
                this.tip_cancel = tip_cancel;

                var tip_confirm = document.createElement("span");
                tip_confirm.className = "tip_confirm";
                tip_confirm.innerHTML = this.okBtn["content"];
//                tip_confirm.addEventListener("click", this.okBtn["fn"]);
                tip_confirm.onclick = function () {
                    that.okBtn["fn"]();
                }

                tip_confirm.addEventListener("click", function () {
                    that.hide();
                })
                tip_footer.appendChild(tip_confirm);
                this.tip_confirm = tip_confirm;
            }
        },
        hide: function () {
            this.tip.style.display = "none";
        },
        show: function () {
            this.tip.style.display = "block";
        }
    }


    btn.onclick = function () {
        tip.init({
            header: "看清楚了",
            content: "前面一百米有个美女",
            okBtn: {
                content: "要号码", fn: function () {
                    alert("就开始追求了");
                }
            },
            cancelBtn: {
                content: "我放弃", fn: function () {
                    alert("单身只有原因的");
                }
            },
        });
    }

    btn2.onclick = function () {
        tip.init({
            header: "准备 准备",
            content: "还有一个月十一",
            okBtn: {
                content: "准备", fn: function () {
                    alert("出去好好的玩耍 ");
                }
            },
            cancelBtn: {
                content: "放弃", fn: function () {
                    alert("就在教室好好学习");
                }
            },
        });
    }
</script>
</html>